<template>
  <ModalFormTemplate
    ref="modalRef"
    :open="open"
    :formConfig="formConfig"
    :title="title"
    :width="width"
    @cancel="onCancel"
    @finish="onFinish"
  />
</template>
<script setup lang="ts">
  import { computed, ref } from 'vue';
  import ModalFormTemplate from '@/components/template/form/modal-form-template.vue';

  const title = '商户资料添加'; //弹窗标题
  const width = 550; //弹窗宽度
  const modalRef = ref(); //通用模态弹窗组件引用，用与调用模态弹窗组件内部方法
  const open = ref(false); //控制弹窗显示、隐藏
  const emits = defineEmits<{ dataReload: [] }>(); //通知调用组件(父组件) 执行 父组件 的 @dataReload 的方法

  defineExpose({ show }); //暴露接口 show(显示弹窗) 方法，供 父组件 调用

  /* [关闭弹窗] 1. 重置表单 2. 关闭弹窗 */
  function onCancel() {
    modalRef.value.resetForm();
    open.value = false;
  }

  /* [显示弹窗] 1. 显示弹窗  */
  function show() {
    open.value = true;
  }

  /* [提交弹窗] 1. 调用子组件 提交方法 2. 提交成功后，关闭弹窗 3. 刷新父组件数据 */
  async function onFinish() {
    const params = modalRef.value?.getFormParams();
    const mergedParams = { ...addParams, ...params }; //合并提交参数
    try {
      const ret = await modalRef.value?.postFormData(addAction, mergedParams);
      if (ret === true) {
        onCancel();
        emits('dataReload');
      }
    } catch (error) {}
  }
  const addAction = 'base.merchant.mchdata.ServiceImpl.save'; //save接口 方法名
  const addParams = { mch_data_id: 0 }; //save接口 参数

  /* [表单配置] */
  const formConfig = computed(() => [
    {
      title: '所属商户ID',
      dataIndex: 'mch_id',
      type: 'select' as const,
      required: true,
      props: {
        options: {
          action: 'base.merchant.mch.ServiceImpl.listSelectByMchId',
          params: {},
        },
      },
    },
    {
      title: '进件商户类型',
      dataIndex: 'mch_type',
      type: 'select' as const,
      required: true,
      props: {
        options: [
          { label: '小微商户', value: 1 },
          { label: '个体工商户', value: 2 },
          { label: '企业', value: 3 },
        ],
      },
    },
    {
      title: '进件商户名',
      dataIndex: 'mch_name',
      type: 'input' as const,
      maxlength: 250,
      required: true,
      defaultValue: '',
    },
    {
      title: '进件商户简称',
      dataIndex: 'mch_short_name',
      type: 'input' as const,
      maxlength: 50,
      required: true,
      defaultValue: '',
    },
    {
      title: '商户联系人',
      dataIndex: 'mch_contact_name',
      type: 'input' as const,
      maxlength: 200,
      required: true,
      defaultValue: '',
    },
    {
      title: '商户联系人电话',
      dataIndex: 'mch_contact_phone',
      type: 'input' as const,
      maxlength: 13,
      required: true,
      defaultValue: '',
    },
    {
      title: '商户联系人邮箱',
      dataIndex: 'mch_contact_email',
      type: 'input' as const,
      maxlength: 111,
      required: true,
      defaultValue: '',
    },
    {
      title: '营业执照号',
      dataIndex: 'license_number',
      type: 'input' as const,
      required: true,
      maxlength: 128,
      defaultValue: '',
    },
    {
      title: '营业执照类型',
      dataIndex: 'license_type',
      type: 'input-number' as const,
      required: true,
      defaultValue: '',
    },
    {
      title: '注册地址',
      dataIndex: 'license_address',
      type: 'input' as const,
      maxlength: 128,
      required: true,
      defaultValue: '',
    },
    {
      title: '有效期限开始日期',
      dataIndex: 'period_begin',
      type: 'date-picker' as const,
      required: true,
      defaultValue: '',
    },
    {
      title: '有效期限是否长期',
      dataIndex: 'period_status',
      type: 'switch' as const,
      props: {
        checkedChildren: '是',
        checkedValue: 1,
        unCheckedChildren: '否',
        unCheckedValue: 2,
      },
      required: true,
      defaultValue: 1,
    },
    {
      title: '有效期限结束日期',
      dataIndex: 'period_end',
      type: 'date-picker' as const,
      defaultValue: '',
      // 当 period_status 为 1 时隐藏
      hidden: (mchData) => {
        return mchData.period_status === 1;
      },
      required: (mcData) => {
        return mcData.period_status === 2;
      },
    },
    {
      title: '营业执照照片',
      dataIndex: 'license_copy',
      type: 'input' as const,
      maxlength: 32,
      required: true,
      defaultValue: '',
    },
    {
      title: '单位证明函照片',
      dataIndex: 'certificate_letter_copy',
      type: 'input' as const,
      maxlength: 32,
      defaultValue: '',
    },
    {
      title: '是否是金融机构',
      dataIndex: 'finance_institution',
      type: 'select' as const,
      props: {
        options: [
          { label: '是', value: 1 },
          { label: '否', value: 2 },
        ],
      },
    },
    {
      title: '金融机构类型',
      dataIndex: 'finance_type',
      type: 'input-number' as const,
      defaultValue: '',
    },
    {
      title: '金融机构许可证图片',
      dataIndex: 'finance_license_pics',
      type: 'input' as const,
      maxlength: 32,
      defaultValue: '',
    },
    {
      title: '客服电话',
      dataIndex: 'service_phone',
      type: 'input' as const,
      maxlength: 32,
      required: true,
      defaultValue: '',
    },
    {
      title: '支付宝账户',
      dataIndex: 'identity',
      type: 'input' as const,
      maxlength: 128,
      defaultValue: '',
    },
    {
      title: '支付宝账户类型',
      dataIndex: 'identity_type',
      type: 'input-number' as const,
      defaultValue: '',
    },
    {
      dataIndex: 'oem_id',
      hidden: true,
    },
    {
      dataIndex: 'oem_name',
      hidden: true,
    },
    {
      dataIndex: 'top_agent_name',
      hidden: true,
    },
    {
      dataIndex: 'agent_name',
      hidden: true,
    },
    {
      dataIndex: 'agent_id',
      hidden: true,
    },
    {
      dataIndex: 'isv_id',
      hidden: true,
    },
    {
      dataIndex: 'isv_name',
      hidden: true,
    },
  ]);
</script>
<style lang="less" scoped></style>
